<script setup>
  import { ref, onMounted } from 'vue'
  import { onShow } from '@dcloudio/uni-app'
  import { getPickUpListApi } from '@/apis/task.js'

  const pickUpList = ref([])
  const nextPage = ref(1)
  const pageSize = ref(10)
  const hasMore = ref(true)

  const getPickUpList = async (page = 1, pageSize = 10) => {
    const { code, data } = await getPickUpListApi(1, page, pageSize)
    if (code !== 200) return uni.utils.toast('获取任务列表失败~')
    // 1.0 清空原数组(下拉刷新时)
    if (page === 1) pickUpList.value = []
    // 1.1 处理数据
    pickUpList.value = [...pickUpList.value, ...(data.items || [])]
    // 1.2 当前页++
    nextPage.value = ++data.page
    // 1.3 判断是否有更多数据
    hasMore.value = nextPage.value <= data.pages
  }

  onMounted(() => {
    // 1. 第一次获取列表数据
    getPickUpList()
  })

  // 1. 上拉分页
  const onScrollLower = () => {
    // 1.0 判断是否有下一页
    if (!hasMore.value) return uni.utils.toast('没有任务任务数据~')
    // 1.1 加载下一页的数据
    getPickUpList(nextPage.value)
  }

  // 2. 下拉刷新
  const isTriggered = ref(false)
  const onRefresh = async () => {
    isTriggered.value = true
    await getPickUpList()
    isTriggered.value = false
  }
</script>

<template>
  <scroll-view
    scroll-y
    refresher-enabled
    class="scroll-view"
    :refresher-triggered="isTriggered"
    @scrolltolower="onScrollLower"
    @refresherrefresh="onRefresh"
  >
    <view class="scroll-view-wrapper">
      <view
        class="task-card"
        v-for="(item, index) in pickUpList"
        :key="item.id"
      >
        <navigator
          hover-class="none"
          :url="`/subpkg_task/detail/index?id=${item.id}`"
        >
          <view class="header">
            <text class="no">任务编号: {{ item.transportTaskId }}</text>
            <!-- <text class="status" v-if="item.status === 1">待提货</text>
            <text class="status" v-if="item.status === 2">在途</text>
            <text class="status" v-if="item.status === 3">改派</text>
            <text class="status" v-if="item.status === 4">已交付</text>
            <text class="status" v-if="item.status === 5">已作废</text> -->
          </view>
          <view class="body">
            <view class="timeline">
              <view class="line">{{ item.startAddress }}</view>
              <view class="line">{{ item.endAddress }}</view>
            </view>
          </view>
        </navigator>
        <view class="footer">
          <view class="label">提货时间</view>
          <view class="time">{{ item.planDepartureTime }}</view>
          <!-- 能提货 -->
          <navigator
            v-if="item.enablePickUp"
            hover-class="none"
            :url="`/subpkg_task/pickup/index?id=${item.id}`"
            class="action"
            >提货</navigator
          >
          <!-- 不能提货 -->
          <button v-else disabled class="action">提货</button>
        </view>
      </view>
      <view v-if="pickUpList.length === 0" class="task-blank">无待提货物</view>
    </view>
  </scroll-view>
</template>

<style lang="scss" scoped>
  @import './styles.scss';
</style>
